<template>
  <div class="share_wrapper">
    <popup v-model="curStatus" @on-hide="hideMask()">
      <div class="share_container" v-if="shareParams">
        <ul class="share_list">
          <li v-for="(i,idx) in list" :key="'share_'+idx" @click="judegeAuthorize(list[idx].id)">
            <dl>
              <dt>
                <img :src="i.imgurl" alt />
              </dt>
              <dd>{{i.title}}</dd>
            </dl>
          </li>
          <li class="copy_link" @click="copyLink()"  :data-clipboard-text='ShareParams.shareLink'>
            <dl>
              <dt>
                <img src="static/image/public/msg_share_copy.png"/>
              </dt>
              <dd>复制链接</dd>
            </dl>
          </li>
        </ul>
        <div class="btn btn_cancel" @click="hideMask()">取消</div>
      </div>
    </popup>
  </div>
</template>
<script>
import { Popup } from "vux"
import tool from '@/assets/js/tool.js'
import mui from '@/assets/js/mui.min.js'
export default {
  components: {
    Popup
  },
  data() {
    // let curPath = (location.origin + location.pathname).replace('index.html','');
    // let imgPath = curPath + 'static/image/public/defaultHeader.png'; //分享的图片的路径
    // console.log(imgPath)
    return {
      // 弹窗是否显示
      curStatus: true,
      // 分享列表
      list: [
        {
          id: "weixin",
          imgurl: "static/image/public/msg_share_weixin.png",
          title: "微信",
          ex:'WXSceneSession'
        },
        {
          id: "weixinFriends",
          imgurl: "static/image/public/msg_share_friends.png",
          title: "朋友圈",
          ex:'WXSceneTimeline'
        },
        {
          id: "qq",
          imgurl: "static/image/public/msg_share_qq.png",
          title: "QQ"
        },
        {
          id: "sinaweibo",
          imgurl: "static/image/public/msg_share_weibo.png",
          title: "微博"
        }
      ],
      showShareStatus: undefined,
      shareParams: undefined,// 传递过来的分享参数
      shareOptions:{}, //分享渠道[服务类型]：微信、QQ、新浪微博、腾讯微博
      //qq分享的内容选项
      qqOptions:{},
      //微信分享的内容选项
      weixinOptions:{},
      // 微信朋友圈分享的内容选项
      weixinFriendsOptions:{},
      //新浪微博分享的内容选项
      sinaweiboOptions:{},
    };
  },
  created() {
    if(window.plus){
      mui.alert('aaa')
      this.getExtras()
      this.getShareServies()
    }
  },
  watch: {
    showShareStatus: function(val) {
      this.curStatus = val;
    },
    curStatus: function(val) {
      this.$emit("changeStatus", val);
    }
  },
  methods: {
    // 获取创建webview时传递的参数
    getExtras() {
      if(window.plus){
        let shareView = plus.webview.getWebviewById('share')
        this.ShareParams = shareView.ShareParams
        this.showShareStatus = shareView.showShareStatus
        this.qqOptions = {
          type:'text',
          title:this.clipText(this.ShareParams.shareTitle,30),//（必填，最长30个字符）
          content:this.clipText(this.ShareParams.shareContent,40),//（可选，最长40个字符）
          pictures: [this.ShareParams.shareThumbs],
          href:this.ShareParams.shareLink,
        }
        //微信分享的内容选项
        this.weixinOptions = {
          type:'web',
          title:this.ShareParams.shareTitle,
          content:this.ShareParams.shareContent,
          thumbs: [this.ShareParams.shareThumbs],
          href:this.ShareParams.shareLink,
          extra:{
            scene:"WXSceneSession"
          }
        }
        // 微信朋友圈分享的内容选项
        this.weixinFriendsOptions = {
          type:'web',
          title:this.ShareParams.shareTitle,
          content:this.ShareParams.shareContent,
          thumbs: [this.ShareParams.shareThumbs],
          href:this.ShareParams.shareLink,
          extra:{
            scene:"WXSceneTimeline"
          }
        },
        //新浪微博分享的内容选项
        this.sinaweiboOptions = {
          content:this.ShareParams.shareContent,
          href:this.ShareParams.shareLink,
        }
      }
    },
    // 获取分享服务
    getShareServies() {
      if (window.plus) {
        var that = this;
        var shareObj = {}
        // 监听plusready事件
        mui.plusReady(function(){
          // 扩展API加载完毕，现在可以正常调用扩展API
          plus.share.getServices(function success(data){
            data.map((item, idx)=>{
              shareObj[item.id] = item
            })
            that.shareOptions = shareObj
          }, function error(e){
            plus.nativeUI.toast("获取分享服务列表失败："+e.message);
          });
        })
      }else{
        alert('获取列表失败')
      }
    },
    hideMask() {
      this.curStatus = false;
    },
    /*截取字符串*/
    clipText(text,num){
      return tool.clipText(text,num)
    },
    //复制连接
    copyLink:function(){
      tool.copyContent(this,'.copy_link');
    },
    //判断是否授权
    judegeAuthorize:function(id){
      var target = this.shareOptions;
      if(JSON.stringify(target) == '{}'){
        plus.nativeUI.toast("分享组件未准备好，请稍后再试");
        return
      }
      let config = null;
      switch(id){
        case 'weixin':
          config = this.weixinOptions;
          break;
        case 'weixinFriends':
          config = this.weixinFriendsOptions;
          id = 'weixin';
          break;
        case 'qq':
          config = this.qqOptions;
          break;
        case 'sinaweibo':
          config = this.sinaweiboOptions;
          break;
      }
      var that = this;
      if(target[id].authenticated){
        this.shareHandler(target[id],config);
      }else{
        target[id].authorize( function(){
          plus.nativeUI.toast("授权成功");
          that.shareHandler(target[id],config);
        }, function(e){
          plus.nativeUI.toast("授权失败");
        });
      }
    },
    //处理分享功能
    shareHandler:function(target,config){
      console.log(target,config)
      target.send(config, function(msg){
        // description: 分享服务描述，如微信，QQ，新浪微博
        plus.nativeUI.toast("分享到"+target.description+"成功");
      },function(e){
        // console.log(e)
        let msg = e.code == -2 ? '已取消分享' : "分享到"+target.description+"失败";
        plus.nativeUI.toast(msg);
      });
    },
  }
};
</script>
<style lang="less">
.share_wrapper {
  .vux-popup-dialog {
    background: none;
  }
  .share_container {
    padding: 20px;
  }
  .share_list {
    display: flex;
    align-items: center;
    flex-flow: wrap;
    background: #fff;
    border-radius: 10px;
    padding: 30px 10px;
    li {
      width: 20%;
      text-align: center;
      dt {
        width: 70px;
        height: 70px;
        margin: 0 auto 10px;
        img{
          display: block;
          width: 100%;
          height: 100%;
        }
      }
      dd{
        font-size: 22px;
      }
    }
  }
  .btn{
    width: 100%;
    height: 90px;
    line-height: 90px;
    border-radius: 10px;
    background: #fff;
    text-align: center;
    margin-top: 10px;
  }
}
</style>

